<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="../resources/get-host-info.js"></script>
<style>
#test {
  background: red;
}
</style>
<div id="test"></div>
<script>
  if (window.location.origin != get_host_info().AUTHENTICATED_ORIGIN) {
    window.location = get_host_info().AUTHENTICATED_ORIGIN + window.location.pathname;
  } else {
    test(function() {
      const GREEN = 'rgb(0, 128, 0)';
      const element = document.getElementById('test');
      assert_true(window.isSecureContext);

      element.setAttribute('style', 'background: paint(success) green');
      assert_equals(getComputedStyle(element).backgroundColor, GREEN);
      element.setAttribute('style', '');

      element.style.background = 'paint(success) green';
      assert_equals(getComputedStyle(element).backgroundColor, GREEN);
      element.style.background = '';

      const styleSheet = document.styleSheets[0];

      let idx = styleSheet.insertRule(
          '#test { background: paint(success) green; }',
          styleSheet.cssRules.length);
      assert_equals(getComputedStyle(element).backgroundColor, GREEN);
      styleSheet.deleteRule(idx);

      idx = styleSheet.insertRule(
          '#test { --bg: paint(success) green; background: var(--bg); }',
          styleSheet.cssRules.length);
      assert_equals(getComputedStyle(element).backgroundColor, GREEN);
      styleSheet.deleteRule(idx);
    });
  }
</script>
